﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 140px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Tabs/ViewDndTabSource" target="_blank">点击查看扩展代码</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Tabs/ViewTabsCssSource" target="_blank">点击查看扩展样式</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.tabs.dndTab.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.tabs.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Tabs/DndTabDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>dnd</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示是否启用选项卡组件的选项卡头拖动排序功能；
                </td>
                <td>false</td>
            </tr>
            <tr>
                <td>onBeforeDrag</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在开始拖动选项卡头前瞬间所触发的动作。<br />
                    该事件函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>title: 表示被拖动的 tab-panel 的标题 title 值<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示被拖动的 tab-panel 的索引号<br />
                    如果该事件函数返回 false，则将取消该选项卡的拖动行为。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onStartDrag</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在开始拖动选项卡头后瞬间所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>title: 表示被拖动的 tab-panel 的标题 title 值<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index: 表示被拖动的 tab-panel 的索引号
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onStopDrag</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在停止拖动选项卡头后瞬间所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>title : 表示被拖动的选项卡的标题；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>index : 表示被拖动的选项卡的索引号（从 0 开始计数）；<br />
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onDragEnter</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在拖动一个选项卡头进入另一个选项卡头区域前瞬间所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示当前拖放到的目标位置的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示被拖动的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示被拖动的选项卡当前处于拖放到的目标位置选项卡的具体位置，该参数可能的值为：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示 source 处于 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示 source 处于 target 的后一格位置；<br />
                    如果该事件函数返回 false，则将取消该选项卡的拖动放置行为。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onDragOver</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在拖动一个选项卡头进入另一个选项卡头区域后在其上方移动时所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示当前拖放到的目标位置的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示被拖动的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示被拖动的选项卡当前处于拖放到的目标位置选项卡的具体位置，该参数可能的值为：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示 source 处于 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示 source 处于 target 的后一格位置；<br />
                    如果该事件函数返回 false，则将立即取消该选项卡的拖动放置行为。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onDragLeave</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在拖动一个选项卡头进入另一个选项卡头区域后并拖动离开该区域时所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示当前拖放到的目标位置的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示被拖动的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示被拖动的选项卡当前处于拖放到的目标位置选项卡的具体位置，该参数可能的值为：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示 source 处于 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示 source 处于 target 的后一格位置；
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onBeforeDrop</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在拖动一个选项卡头进入另一个选项卡头区域后，松开鼠标以将被拖动的选项卡放置在相应位置前瞬间所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示当前拖放到的目标位置的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示被拖动的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示被拖动的选项卡当前处于拖放到的目标位置选项卡的具体位置，该参数可能的值为：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示 source 处于 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示 source 处于 target 的后一格位置；<br />
                    如果该事件函数返回 false，则将立即取消该选项卡的拖动放置行为。
                </td>
                <td>空</td>
            </tr>
            <tr>
                <td>onDrop</td>
                <td>Function 类型</td>
                <td>
                    当启用选项卡头拖动排序功能时（dnd: true），在拖动一个选项卡头进入另一个选项卡头区域后，松开鼠标以将被拖动的选项卡放置在相应位置后瞬间所触发的动作。<br />
                    该事件回调函数签名中定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>target: 表示当前拖放到的目标位置的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>source: 表示被拖动的选项卡的 jQuery-DOM 对象；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>point : 表示被拖动的选项卡当前处于拖放到的目标位置选项卡的具体位置，该参数可能的值为：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"before":   表示 source 处于 target 的前一格位置；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"after":    表示 source 处于 target 的后一格位置；
                </td>
                <td>空</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:10%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>enableDnd</td>
                <td>否</td>
                <td>which</td>
                <td>
                    启用 easyui-tabs 选项卡组件的选项卡头拖动排序功能；该方法定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>which:  指定的选项卡的 索引号 或者 标题。该参数可选，如果未指定该参数，则表示启用 easyui-tabs 组件所有选项卡的选项卡头拖动排序功能。<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
            <tr>
                <td>disableDnd</td>
                <td>否</td>
                <td>which</td>
                <td>
                    禁用 easyui-tabs 选项卡组件的选项卡头拖动排序功能；该方法定义如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>which:  指定的选项卡的 索引号 或者 标题。该参数可选，如果未指定该参数，则表示禁用 easyui-tabs 组件所有选项卡的选项卡头拖动排序功能。<br />
                    返回值：返回表示当前选项卡控件 easyui-tabs 的 jQuery 链式对象。
                </td>
            </tr>
        </table>
    </div>
</div>
